<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .title {
            line-height: 40px;
        }

        .list {
            margin-top: 20px;
        }

        .list li {
            line-height: 32px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <h2 class="title">标题</h2>

        <ul class="list one">
            1111111111
            <li class="first" id="demo">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <!-- <li class="last">06</li> -->
            7777777
        </ul>
    </div>
</body>
<script>
    // 节点: 文档 元素 属性 文本 注释节点


    // 节点层级关系的查找
    // 父节点 
    // 子节点
    // 同胞节点(同级)

    var one = document.getElementsByClassName("one")[0];

    // 父节点  父元素 (作为父节点的一般是元素节点)
    // Element.parentNode
    // Element.parentElement

    // console.log(one.parentNode);
    // console.log(one.parentElement);


    // 子节点   子元素
    // Element.childNodes  子节点
    // Element.children    子元素
    console.log(one.childNodes);
    console.log(one.children);

    // console.log(one.childNodes[0]);

    // 第一个  子节点   子元素
    // Element.firstChild   第一个子节点
    // Element.firstElementChild     第一个子元素
    // console.log(one.firstChild);
    // console.log(one.firstElementChild);

    // 最后一个  子节点   子元素
    // Element.lastChild   最后一个子节点
    // Element.lastElementChild     最后一个子元素
    // console.log(one.lastChild);
    // console.log(one.lastElementChild);

    // 同胞节点
    // 前一个同胞节点  同级元素   previous 早先的 先前的   Sibling=> 同胞
    // Element.previousSibling  前一个节点(同胞节点)
    // Element.previousElementSibling  前一个元素(同级元素)

    // var mid = document.querySelector(".mid");
    // console.log(mid.previousSibling);
    // console.log(mid.previousElementSibling);


    // 后一个同胞节点  同级元素   previous 早先的 先后的   Sibling=> 同胞
    // Element.nextSibling  后一个节点(同胞节点)
    // Element.nextElementSibling  后一个元素(同级元素)

    var mid = document.querySelector(".mid");
    console.log(mid.nextSibling);
    console.log(mid.nextElementSibling);











</script>

</html>